<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        .center{
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
        }

        .center-top,#center-bottom{
            font-weight: 600;
            font-size: 25px;
        }
        .bottom{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .bottom button{
            margin-left: 20px;
        }

        hr{
            display: inline-block;
            width: 80%;
            color: black;
        }

    </style>
</head>
<body>

<div>
    商品名称：<input type="text" id="name"><br>
    商品价格：<input type="number" id="price"><br>
    商品数量：<input type="number" id="number"><br>
    <button onclick="addProduct()">添加</button>
</div>

<div class="center">
    <div class="center-top">购物车</div>
    <hr>
    <!--表格-->
    <table id="tab" cellpadding="10">
        <tr>
            <th>
                <button onclick="allDel()"> 批量删除</button>
                <button onclick="allCheck()" >全选</button>
            </th>
            <th>编号</th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
    </table>
    <div id="center-bottom"></div>
    <hr>
</div>
<div class="bottom">
    <button>结算</button>
    <button onclick="cleanCart()">清空购物车</button>
</div>

</body>
<script>

    function $(id) {
        return document.getElementById(id);
    }

    //标志位
    var flag=true;
    //全选，全不选
    function allCheck() {
        //获取复选框
        let del = document.getElementsByName("del");
        if(flag){
            del.forEach(function (checkobj) {
                //遍历并全选
                checkobj.checked=flag;
            });
            flag=false;
        }else {
            del.forEach(function (checkobj) {
                //遍历并全取消选中
                checkobj.checked=flag;
            });
            flag=true;
        }
    }

    //编号id参数
    let i=1;
    //添加商品
    function addProduct() {
        //获取输入框中的数据
        let name = $("name").value.trim();
        let price = $("price").value.trim();
        let number = $("number").value.trim();
        //获取表格对象
        let tab = $("tab");
        //获取表格中的行的长度
        let length1 = tab.rows.length;
        //向表格中插入新行
        let row = tab.insertRow(length1);
        i++;
        //设置行的id
        row.id="pid"+i;
        //插入单元格并赋值
        row.insertCell(0).innerHTML=" <input type=\"checkbox\" value=\"1\" name=\"del\">";
        row.insertCell(1).innerHTML=i;
        row.insertCell(2).innerHTML=name;
        row.insertCell(3).innerHTML=price;
        row.insertCell(4).innerHTML="<button onclick='addNum("+price+","+i+")'>+</button>\n" +
            "                <input id=\'num"+i+"\' type=\"number\" style=\"width: 60px\" onblur='changeNum("+price+","+i+")'>\n" +
            "                <button onclick='redNum("+price+","+i+")'>-</button>";
        $("num"+i).value=number;
        row.insertCell(5).innerHTML="<div name='count' id='count"+i+"'>"+price*number+"</div>";
        row.insertCell(6).innerHTML="  <button onclick='delProduct("+i+")'>删除</button>";
        addSum();

    }

    //添加数量
    function addNum(price,length) {
        //通过数量id获取数量对象并拿到值
        let nu = $("num"+length).value.trim();
        //数量增加
        let number1 = parseInt(nu)+1;
        //赋值更新数量
        $("num"+length).value= number1;
        //计算小计
        let prices=number1*price;
        //显示小计
        $("count"+length).innerHTML=prices;
        addSum();
    }

    //减少数量
    function redNum(price,length) {
        let nums = $("num"+length).value.trim();
        let number1=parseInt(nums)-1;
        $("num"+length).value= parseInt(nums)-1;
        let prices=number1*price;
        $("count"+length).innerHTML=prices;
        addSum();
    }

    //手动通过输入框修改数量改变时，合计和总金额改变
    function changeNum(price,length) {
        //获取数量
        let nu = $("num"+length).value.trim();
        let number1 = parseInt(nu);
        //计算价格
        let prices=number1*price;
        //更新显示
        $("count"+length).innerHTML=prices;
        addSum();
    }

    //删除商品
    function delProduct(num) {
        //获取行对象索引
        let row = $("pid"+num).rowIndex;
        //获取表格对象
        $("tab").deleteRow(row);
        addSum()
    }

    //批量删除
    function allDel() {
        //获取所有复选框
        let checkbox = document.getElementsByName("del");
        for(i=checkbox.length-1;i>=0;i--){
            if(checkbox[i].checked){
                //选中拿到父元素
                let tr = checkbox[i].parentElement.parentElement;
                //获取行对象索引
                let row = $(tr.id).rowIndex;
                //获取表格对象
                $("tab").deleteRow(row);
            }
        }
        addSum();
    }

    //计算总金额
    function addSum() {
        //定义总金额
        let sum=0;
        //获取表格的小计
       let count = document.getElementsByName("count");
       //获取标签中的内容
        count.forEach(function (data) {
            //遍历相加
             sum += parseInt(data.innerText);
        });
        //输出显示
        $("center-bottom").innerHTML="总金额："+sum;
    }

    //清空购物车
    function cleanCart() {
        //获取所有复选框
        let checkbox = document.getElementsByName("del");
        //因为删除后元素会向前补，所有必须逆向删除
        for(i=checkbox.length-1;i>=0;i--){
            console.log("1");
            //选中拿到父元素
            let tr = checkbox[i].parentElement.parentElement;
            //获取行对象索引
            let row = $(tr.id).rowIndex;
            //获取表格对象
            $("tab").deleteRow(row);
        }
        addSum();
    }

</script>
</html>